<template>
  <div class="w-button" :style="{ '--bgColor': bgColor, '--box-shadow-color': boxShadowColor }">
    <i class="icon iconfont" v-if="icon" :class="icon"></i> <span>{{ name }}</span>
    <div class="w-top"></div>
    <div class="w-bottom"></div>
    <div class="w-left"></div>
    <div class="w-right"></div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    name: {
      type: String,
      default() {
        return '';
      }
    },
    icon: {
      type: String,
      default() {
        return '';
      }
    },
    bgColor: {
      type: String,
      default() {
        return '#0b2b48';
      }
    },
    boxShadowColor: {
      type: String,
      default() {
        return '#1067a0';
      }
    }
  },
}
</script>

<style lang="scss" scoped>

.w-button {
  position: relative;
  width: 120px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  cursor: pointer;
  transition: 0.5s all;
  border: none;
  color: #fff;
  background: var(--bgColor);

  .icon {
    margin-right: 10px;
  }
}

.w-button span {
  color: #fff;
  font-size: 14px;
}

.w-button:hover {
  box-shadow: inset 0px 0px 25px var(--box-shadow-color);
}

.w-button:active {
  transition: 0.2s all;
  box-shadow: inset 0px 0px 25px var(--box-shadow-color);
}


.w-button div {
  transition: 0.5s all;
  position: absolute;
  background-color: var(--box-shadow-color);
  box-shadow: 0 0 15px var(--box-shadow-color), 0 0 30px var(--box-shadow-color), 0 0 50px var(--box-shadow-color);
}

.w-button .w-top {
  width: 15px;
  height: 2px;
  top: 0;
  left: 0;
}

.w-button .w-bottom {
  width: 15px;
  height: 2px;
  bottom: 0;
  right: 0;
}

.w-button .w-left {
  width: 2px;
  height: 15px;
  top: 0;
  left: 0;
}

.w-button .w-right {
  width: 2px;
  height: 15px;
  right: 0;
  bottom: 0;
}

.w-button:hover .w-top,
.w-button:hover .w-bottom {
  width: 100%;
}

.w-button:hover .w-left,
.w-button:hover .w-right {
  height: 100%;
}
</style>
